<template>
    <div>
        <div class="wrapper">
            <!--背景图片-->
            <div id="web_bg" class="background"></div>
            <!--其他代码 ... -->
        </div>

        <div class="box1">
            <h1>用户登录</h1>
            <form method="post" @submit="message()">
                <div class="form">账  号: <input type="text" id="account" @focus="pwd1()" @blur="set1()" name="account"
                                             placeholder="  请输入手机号码"/></div>
                <div class="form">密  码: <input type="password" id="password" @focus="pwd()" @blur="set()"
                                             name="password" placeholder="  请输入密码"/></div>
                <div class="form">验证码: <input type="text" id="code" @focus="pwd2" @blur="set2()" name="code"
                                              placeholder="  请输入验证码"/></div>
                <!--                <div class="form"><img alt="验证码" id="imageCode" src="http://www.heilama.cn/apis/user/kaptcha"-->
                <div class="form"><img alt="验证码" id="imageCode" :src="imgSrc"   @click="reloadCode()"></div>
                <br>

                <div class="remember"><el-checkbox v-model="checked">&nbsp;两周内自动登录</el-checkbox>
                </div>
                <button type="button" @click="message()">登录</button>&nbsp;&nbsp;&nbsp;&nbsp;
                <button type="button" @click="back">返回</button>
            </form>
            <p class="p1">还没有账号？&nbsp;<a href="/register">点击注册</a></p>
        </div>
    </div>
</template>

<script>


    export default {

        data() {
            return {
                checked:true,
                imgSrc:''
            }
        },
        created() {
            this.reloadCode()
        },
        methods: {
            back() {
                this.$router.push('/')
            },
            async message() {

                const phone = document.getElementById("account").value;
                const pass1 = document.getElementById("password").value;
                const code = document.getElementById("code").value;
                const pass2 = this.$md5(pass1).toUpperCase();

                if (!(/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(phone))) {
                    return this.$message.error('请输入正确的手机号！')
                } else if ((pass1.length < 8) || !(/[A-Za-z].*[0-9]|[0-9].*[A-Za-z]/.test(pass1))) {
                    return this.$message.error('密码不合法，请检查!')
                } else {
                    const {data: res} = await this.$http.post('/user/login', {
                        userPhone: phone,
                        password: pass2,
                        code: code
                    })
                    console.log(res)
                    if (res.status !== 200) {
                        return this.$message.error(res.msg)
                    }
                    this.$message.success('登录成功')
                    if (this.checked){
                        localStorage.setItem('token', 'Bearer ' + res.data.token)
                        localStorage.setItem('username', res.data.phone)
                        localStorage.setItem('role', res.data.role)
                        localStorage.setItem('userId', res.data.userId)
                    }else{
                        sessionStorage.setItem('token', 'Bearer ' + res.data.token)
                        sessionStorage.setItem('username', res.data.phone)
                        sessionStorage.setItem('role', res.data.role)
                        sessionStorage.setItem('userId', res.data.userId)
                    }

                    await this.$router.push('/');


                }
            },

            pwd1() {
                document.getElementById("account").setAttribute("placeholder", "");
            },

            pwd() {
                document.getElementById("password").setAttribute("placeholder", "");
            },

            pwd2() {
                document.getElementById("code").setAttribute("placeholder", "");
            },

            set1() {
                document.getElementById("account").setAttribute("placeholder", "  请输入手机号码");
            },

            set() {
                document.getElementById("password").setAttribute("placeholder", "  请输入密码");
            },

            set2() {
                document.getElementById("code").setAttribute("placeholder", "  请输入正确的验证码");
            },

            async reloadCode() {
                //time变量的功能是强制刷新，忽略浏览器的缓存机制
                // console.log("test");
                var time = new Date().getTime();
                const {data: res} = await this.$http.get('/user/kaptcha?' + time , {
                    responseType: "arraybuffer"
                })
                    .then(response => {
                        return (
                            "data:image/png;base64," +
                            btoa(
                                new Uint8Array(response.data).reduce(
                                    (data, byte) => data + String.fromCharCode(byte),
                                    ""
                                )
                            )
                        );
                    })
                    .then(res => {
                        this.imgSrc = res; //赋值给img标签的src属性
                    });
                console.log(res)
                this.$message.success('获取验证码成功！')
                // document.getElementById("imageCode").src = "http://Localhost:8282/user/kaptcha?" + time;
                let blob = res
                window.URL.createObjectURL(blob)
                this.imgSrc = window.URL.createObjectURL(blob)//转换为图片路径
                // document.getElementById("imageCode").src = src
            }

        }
    }
</script>

<style scoped>
    * {
        margin: auto auto;
        padding: 0px;
    }

    body {
        font-size: 20px;
        /*background: url(../img/background.jpg)no-repeat;*/
        /*background-size: 100% 150%;*/
    }

    .background {
        background-image: url("/static/img/background.jpg");
    }

    #web_bg {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        min-width: 1000px;
        z-index: -10;
        zoom: 1;
        background-color: #fff;
        background-repeat: no-repeat;
        background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
        background-position: center 0;
    }

    .box1 {
        /*position: relative;*/
        /*transform:scale(1,1);*/
        /*display: flex;*/
        width: 300px;
        height: 500px;
        /*width: 20%;*/
        /*height: 100%;*/
        text-align: center;
        margin-top: 5%;
        border: 0.1px solid rgba(0, 0, 0, 0.3);
        background-color: rgba(0, 0, 0, 0.15);
        padding-bottom: 3%;
    }

    p {
        /*margin-bottom: 10%;*/
    }

    h1 {
        margin-top: 20px;
        font-size: 30px;
        color: black;
    }

    .box1 .form {
        margin-top: 35px;
        color: black;
    }

    .box1 .form input {
        outline: none;
        background-color: rgba(0, 0, 0, 0);
        text-align: center;
        width: 150px;
        height: 30px;
        font-size: 15px;
        border: 0;
        border-bottom: 1.5px solid #000000;
    }

    .box1 .form input:focus {
        top: 0;
        font-size: 15px;
        color: #000;

    }

    .box1 .p1 {
        margin-top: 25px;
        color: black;
    }

    a {
        color: #E8198B;
        text-decoration: none;
        /*color: #000000;*/
    }

    a:hover {
        outline: none;
        color: red;
    }

    .box1 button {
        outline: none;
        margin-left: auto;
        color: #c9c9c9;
        cursor: pointer;
        width: 70px;
        height: 40px;
        font-size: 20px;
        border-radius: 10px;
        border: 0;
        background-image: linear-gradient(to right, #e8198b, #0eb4dd);
    }

    .box1 button:hover {
        outline: none;
        margin-left: auto;
        color: #F0FFFF;
        width: 70px;
        height: 40px;
        border: 0;
        border-radius: 20px;
        background-image: linear-gradient(to right, #e8198b, #0eb4dd);
        transition: all 0.5s linear;
    }

    .remember {
        font-size: 14px;
        margin-bottom: 25px;
    }

</style>
